<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人博客</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/nivo-slider.css">
  <link rel="stylesheet" href="css/flexslider.css">
</head>
<body>
<!--头部-->
<header class="header-wrapper">
  <div class="header-content">
    <div class="middle">
      <div class="info">
        <a href=""><div class="item"><span class="icon icon-tv"></span>主页</div></a>
        <div class="item">画友</div>
        <div class="item">游戏中心</div>
        <div class="item">直播</div>
        <div class="item">周边</div>
        <div class="item">萌战</div>
      </div>


      <div class="user">
        <a style=" color: #222;" href="#"><div class="item">用户</div></a>
        <div class="item">消息</div>
        <div class="item">动态</div>
        <div class="item">收藏夹</div>
        <div class="item">历史</div>
        <div class="item">投稿</div>
        <a style=" color: #222;" href=""><div class="item">退出</div></a>
      </div>

      <div class="user">
        <a href=""><div class="item">登录</div></a>
        <a href=""><div class="item">注册</div></a>
      </div>

    </div>
  </div>
  <div class="header-bg">
    <img class="bg-img" width="100%" src="http://oiq23viaf.bkt.clouddn.com/banner.png">
  </div>
</header>
<!--导航-->
<div class="tab">
  <div class="tab-item">
    <span class="fa fa-home fa-2x"></span>
    <a href="index.html">主页</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="tea.html">茶会</a>
  </div>
  <div class="tab-item">
    <span class="num">5z</span>
    <a href="book.html">本子</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="video.html">视频</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="music.html">音乐</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="rescource.html">资源</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="">小组</a>
  </div>
</div>

<div class="content">
<!--本子-->
<div class="book-box ">
  <ul >
    <li class="book-item clearfix">
      <div class="book-left">
        <a href="#"><img src="images/1.jpg" alt="" width="805" height="440"></a>
        <div class="book-desk">{{$item->title}}[{{$loop->index}}]</div>
      </div>
      <div class="book-right">

        <div class="book-right-item" style="margin-bottom: 6px">
          <img src="images/2.jpg" alt="" width="350" height="217" >
          <div class="book-desk">{{$loop->index}}</div>
        </div>

        <div class="book-right-item" style="margin-bottom: 6px">
          <img src="images/3.jpg" alt="" width="350" height="217" >
          <div class="book-desk">{{$loop->index}}</div>
        </div>

      </div>
    </li>


    <li class="book-item clearfix">
      <div class="book-left">
        <a href="#"><img src="images/4.jpg" alt="" width="805" height="440"></a>
        <div class="book-desk">{{$item->title}}[{{$loop->index}}]</div>
      </div>
      <div class="book-right">

        <div class="book-right-item" style="margin-bottom: 6px">
          <img src="images/5.jpg" alt="" width="350" height="217" >
          <div class="book-desk">{{$loop->index}}</div>
        </div>

        <div class="book-right-item" style="margin-bottom: 6px">
          <img src="images/6.jpg" alt="" width="350" height="217" >
          <div class="book-desk">{{$loop->index}}</div>
        </div>

      </div>
    </li>


    <li class="book-item clearfix">
      <div class="book-left">
        <a href="#"><img src="images/7.jpg" alt="" width="805" height="440"></a>
        <div class="book-desk">{{$item->title}}[{{$loop->index}}]</div>
      </div>
      <div class="book-right">

        <div class="book-right-item" style="margin-bottom: 6px">
          <img src="images/8.jpg" alt="" width="350" height="217" >
          <div class="book-desk">{{$loop->index}}</div>
        </div>

        <div class="book-right-item" style="margin-bottom: 6px">
          <img src="images/9.jpg" alt="" width="350" height="217" >
          <div class="book-desk">{{$loop->index}}</div>
        </div>

      </div>
    </li>
  </ul>

  <div class="unslider-arrow prev"></div>
  <div class="unslider-arrow next"></div>
</div>
<div class="index-nav-title" style="background: url(images/diy_head.png) 50% -3% no-repeat "></div>
<!--用户-->
<div class="fd-author clearfix">
    <ul>
      <li class="author-box">
        <div class="author-top">
          <img src="images/7.jpg" width="100%" height="100%">
        </div>
        <div class="author-bottom clearfix">
          <div class="desc">
            <h4>AE</h4>
            <p>小天使</p>
          </div>
        </div>

        <div class="author-avatar">
          <img src="images/avatar.png" alt="" width="100" height="100">
        </div>
      </li>
      <li class="author-box">
        <div class="author-top">
          <img src="images/8.jpg" width="100%" height="100%">
        </div>
        <div class="author-bottom clearfix">
          <div class="desc">
            <h4>AE</h4>
            <p>小天使</p>
          </div>
        </div>

        <div class="author-avatar">
          <img src="images/avatar.png" alt="" width="100" height="100">
        </div>
      </li>
      <li class="author-box">
        <div class="author-top">
          <img src="images/9.jpg" width="100%" height="100%">
        </div>
        <div class="author-bottom clearfix">
          <div class="desc">
            <h4>AE</h4>
            <p>小天使</p>
          </div>
        </div>

        <div class="author-avatar">
          <img src="images/avatar.png" alt="" width="100" height="100">
        </div>
      </li>
      <li class="author-box">
        <div class="author-top">
          <img src="images/10.jpg" width="100%" height="100%">
        </div>
        <div class="author-bottom clearfix">
          <div class="desc">
            <h4>AE</h4>
            <p>小天使</p>
          </div>
        </div>

        <div class="author-avatar">
          <img src="images/avatar.png" alt="" width="100" height="100">
        </div>
      </li>
      <li class="author-box">
        <div class="author-top">
          <img src="images/11.jpg" width="100%" height="100%">
        </div>
        <div class="author-bottom clearfix">
          <div class="desc">
            <h4>AE</h4>
            <p>小天使</p>
          </div>
        </div>

        <div class="author-avatar">
          <img src="images/avatar.png" alt="" width="100" height="100">
        </div>
      </li>
    </ul>
  </div>
<div class="index-nav-title" style="background: url(images/diy_head.png) 50% 30% no-repeat "></div>
<!--资讯-->
  <div class="latest-news clearfix">
    <div class="news-left-box">
      <div class="news-left nivoSlider">

        <img class="news-item" src="images/12.jpg" alt="" width="100%" >
        <img class="news-item" src="images/13.jpg" alt="" width="100%" >
        <img class="news-item" src="images/14.jpg" alt="" width="100%" >
        <img class="news-item" src="images/1.jpg" alt="" width="100%" >

      </div>
      <div id="indicatorContainer"></div>
    </div>
    <div class="news-right">
      <ul>

        <li class="news-right-item">
          <div class="title">
            <h4>ss</h4>
          </div>
          <div class="user-article clearfix">
            <div class="user-image">
              <img src="images/2.jpg" width="70" height="70" alt="">
            </div>
            <div class="user-info">
              <div class="user-info-item">
                <span class="fa fa-user"></span>
                <span>:ss</span>
              </div>
              <div class="user-info-item">
                <span class="fa fa-clock-o"></span>
                <span>: ss</span>
              </div>
            </div>
            <div class="article-fav">
              <div class="article-fav-item">
                <span class="fa fa-eye"></span>
                <span class="fa fa-commenting"></span>
                <span class="fa fa-star"></span>
              </div>
              <div class="article-fav-item">
                <span>sss</span>
                <span>ss</span>
                <span>0</span>
              </div>
            </div>
          </div>
          <div class="user-desc">
            sss
          </div>
          <a href="{{url('tea/detail').'/'.$item->id}}"><div class="more">
            > 查看详情 >
          </div></a>
        </li>
        <li class="news-right-item">
          <div class="title">
            <h4>ss</h4>
          </div>
          <div class="user-article clearfix">
            <div class="user-image">
              <img src="images/3.jpg" width="70" height="70" alt="">
            </div>
            <div class="user-info">
              <div class="user-info-item">
                <span class="fa fa-user"></span>
                <span>:ss</span>
              </div>
              <div class="user-info-item">
                <span class="fa fa-clock-o"></span>
                <span>: ss</span>
              </div>
            </div>
            <div class="article-fav">
              <div class="article-fav-item">
                <span class="fa fa-eye"></span>
                <span class="fa fa-commenting"></span>
                <span class="fa fa-star"></span>
              </div>
              <div class="article-fav-item">
                <span>sss</span>
                <span>ss</span>
                <span>0</span>
              </div>
            </div>
          </div>
          <div class="user-desc">
            sss
          </div>
          <a href="{{url('tea/detail').'/'.$item->id}}"><div class="more">
            > 查看详情 >
          </div></a>
        </li>
        <li class="news-right-item">
          <div class="title">
            <h4>ss</h4>
          </div>
          <div class="user-article clearfix">
            <div class="user-image">
              <img src="images/4.jpg" width="70" height="70" alt="">
            </div>
            <div class="user-info">
              <div class="user-info-item">
                <span class="fa fa-user"></span>
                <span>:ss</span>
              </div>
              <div class="user-info-item">
                <span class="fa fa-clock-o"></span>
                <span>: ss</span>
              </div>
            </div>
            <div class="article-fav">
              <div class="article-fav-item">
                <span class="fa fa-eye"></span>
                <span class="fa fa-commenting"></span>
                <span class="fa fa-star"></span>
              </div>
              <div class="article-fav-item">
                <span>sss</span>
                <span>ss</span>
                <span>0</span>
              </div>
            </div>
          </div>
          <div class="user-desc">
            sss
          </div>
          <a href="{{url('tea/detail').'/'.$item->id}}"><div class="more">
            > 查看详情 >
          </div></a>
        </li>
        <li class="news-right-item">
          <div class="title">
            <h4>ss</h4>
          </div>
          <div class="user-article clearfix">
            <div class="user-image">
              <img src="images/5.jpg" width="70" height="70" alt="">
            </div>
            <div class="user-info">
              <div class="user-info-item">
                <span class="fa fa-user"></span>
                <span>:ss</span>
              </div>
              <div class="user-info-item">
                <span class="fa fa-clock-o"></span>
                <span>: ss</span>
              </div>
            </div>
            <div class="article-fav">
              <div class="article-fav-item">
                <span class="fa fa-eye"></span>
                <span class="fa fa-commenting"></span>
                <span class="fa fa-star"></span>
              </div>
              <div class="article-fav-item">
                <span>sss</span>
                <span>ss</span>
                <span>0</span>
              </div>
            </div>
          </div>
          <div class="user-desc">
            sss
          </div>
          <a href="{{url('tea/detail').'/'.$item->id}}"><div class="more">
            > 查看详情 >
          </div></a>
        </li>

      </ul>
    </div>

  </div>
  <div class="index-nav-title" style="background: url(images/diy_head.png) 50% 65% no-repeat "></div>
<!--优秀作品-->
  <div class="movie-box flexslider">
    <ul class="slides">

      <li class="movie-box-item" >
        <img src="images/9.jpg" alt="">
        <div class="bette_video_author">
          <div class="bette_video_author_video">
            <a href="{{url('video/detail').'/'.$item->id}}"><img src="images/8.jpg" alt="" width="100%" height="220px" ></a>
            <p >55</p>
            <div class="bette_video_author_video_name">
              <div class="left">bg: 55</div>
              <div class="right" >111</div>
              <div class="fa fa-star-o right"></div>
              <div class="right">333</div>
              <div class="fa fa-eye right"></div>
            </div>
          </div>
          <div class="bette_video_author_content">
            <div class="bette_video_author_content_tab" >777</div>
            <div class="bette_video_author_content_content" >
              454564
            </div>
          </div>
        </div>
      </li>
      <li class="movie-box-item" >
        <img src="images/5.jpg" alt="">
        <div class="bette_video_author">
          <div class="bette_video_author_video">
            <a href="{{url('video/detail').'/'.$item->id}}"><img src="images/8.jpg" alt="" width="100%" height="220px" ></a>
            <p >55</p>
            <div class="bette_video_author_video_name">
              <div class="left">bg: 55</div>
              <div class="right" >111</div>
              <div class="fa fa-star-o right"></div>
              <div class="right">333</div>
              <div class="fa fa-eye right"></div>
            </div>
          </div>
          <div class="bette_video_author_content">
            <div class="bette_video_author_content_tab" >777</div>
            <div class="bette_video_author_content_content" >
              454564
            </div>
          </div>
        </div>
      </li>
      <li class="movie-box-item" >
        <img src="images/7.jpg" alt="">
        <div class="bette_video_author">
          <div class="bette_video_author_video">
            <a href="{{url('video/detail').'/'.$item->id}}"><img src="images/8.jpg" alt="" width="100%" height="220px" ></a>
            <p >55</p>
            <div class="bette_video_author_video_name">
              <div class="left">bg: 55</div>
              <div class="right" >111</div>
              <div class="fa fa-star-o right"></div>
              <div class="right">333</div>
              <div class="fa fa-eye right"></div>
            </div>
          </div>
          <div class="bette_video_author_content">
            <div class="bette_video_author_content_tab" >777</div>
            <div class="bette_video_author_content_content" >
              454564
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="index-nav-title" style="background: url(images/diy_head.png) 50% 101% no-repeat "></div>
<!--图片-->
  <div class="news-res clearfix" >
    <div class="news-res-box" >
      <div class="news-image" >
        <img src="images/5.jpg" alt="" width="100%" height="270px">
        <a href="{{url('resource/detail').'/'.$item->id}}"><div class="news-res-mask clearfix" ></div></a>
        <div class="news-category" >
          <p>zzz</p>
          <p class="news-res-data">xxx</p>
        </div>
      </div>
      <p class="news-title">ddd</p>

      <div class="user-info" >
        <div>www</div>
        <div>
          <span class="fa fa-eye"></span>
          <span>qqq</span>
          <span class="fa fa-commenting"></span>
          <span>ddd</span>
        </div>
      </div>
    </div>
  </div>

  <div class="news-res clearfix" >
    <div class="news-res-box" >
      <div class="news-image" >
        <img src="images/6.jpg" alt="" width="100%" height="270px">
        <a href="{{url('resource/detail').'/'.$item->id}}"><div class="news-res-mask clearfix" ></div></a>
        <div class="news-category" >
          <p>zzz</p>
          <p class="news-res-data">xxx</p>
        </div>
      </div>
      <p class="news-title">ddd</p>

      <div class="user-info" >
        <div>www</div>
        <div>
          <span class="fa fa-eye"></span>
          <span>qqq</span>
          <span class="fa fa-commenting"></span>
          <span>ddd</span>
        </div>
      </div>
    </div>
  </div>

  <div class="news-res clearfix" >
    <div class="news-res-box" >
      <div class="news-image" >
        <img src="images/7.jpg" alt="" width="100%" height="270px">
        <a href="{{url('resource/detail').'/'.$item->id}}"><div class="news-res-mask clearfix" ></div></a>
        <div class="news-category" >
          <p>zzz</p>
          <p class="news-res-data">xxx</p>
        </div>
      </div>
      <p class="news-title">ddd</p>

      <div class="user-info" >
        <div>www</div>
        <div>
          <span class="fa fa-eye"></span>
          <span>qqq</span>
          <span class="fa fa-commenting"></span>
          <span>ddd</span>
        </div>
      </div>
    </div>
  </div>

  <div class="news-res clearfix" >
    <div class="news-res-box" >
      <div class="news-image" >
        <img src="images/9.jpg" alt="" width="100%" height="270px">
        <a href="{{url('resource/detail').'/'.$item->id}}"><div class="news-res-mask clearfix" ></div></a>
        <div class="news-category" >
          <p>zzz</p>
          <p class="news-res-data">xxx</p>
        </div>
      </div>
      <p class="news-title">ddd</p>

      <div class="user-info" >
        <div>www</div>
        <div>
          <span class="fa fa-eye"></span>
          <span>qqq</span>
          <span class="fa fa-commenting"></span>
          <span>ddd</span>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/layer/2.4/layer.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/radialIndicator.js"></script>
<script src="js/unslider.js"></script>

<script>
  $(function() {
    var fa = $('.latest-news');
    var newHover = true;
    var newPass = true;
    var proSpeed = 0;
    var authorNum = 0;
    var authorzIndex = 5;
    var authorTab = $('.news-right-item');
    var authorTabLength = $('.news-right-item').length;
    authorTab.eq(authorNum).addClass('active').css({
      zIndex: authorzIndex++
    });

    if (newHover) {
      fa.on('mouseover', function () {
        clearInterval(proTimer);
      });
      fa.on('mouseout', function () {
        newPass = true;
        clearInterval(proTimer);
        proTime();

      })
    }

    $('.news-left').nivoSlider({
      controlNav: true,
      animSpeed: 500,
      manualAdvance: true,
      prevText: '',
      nextText: '',
      afterLoad: function () {
        proTime();
      },
      afterChange: function () {
        proSpeed = 0;
        radialObj.value(proSpeed);
        authorChanger();
        clearInterval(proTimer);
        proTime();
      },
      beforeChange: function () {
        clearInterval(proTimer);
      }
    });
    $('.nivo-control').text('');



    function proTime() {
      if (newPass) {
        newPass = false;
        window.proTimer = setInterval(function () {
          proSpeed++;
          radialObj.value(proSpeed);
          if (proSpeed == 100) {
            newPass = true;
            $('.nivo-nextNav').click()
          }
        }, 50)
      }
    }
    function authorChanger() {
      $('.nivo-control').each(function (index, val) {
        if ($(val).attr('class').indexOf('active') > 0) {
          authorNum = index;
        }
      });

      authorTab.each(function (index, val) {
        $(val).removeClass('active');
      });
      authorTab.eq(authorNum).addClass('active').css({
        zIndex: authorzIndex++
      });
    }

    var radialObj = radialIndicator('#indicatorContainer', {
      barColor: 'rgba(0,120,255,1)',
      barBgColor: 'rgba(0,0,0,0.5)',
      barWidth: 5,
      initValue: 0,
      roundCorner: true,
      displayNumber: false,
      radius: 15
    });


    var unslider = $('.book-box').unslider({
      speed: 500,               //  The speed to animate each slide (in milliseconds)
      delay: 5000,              //  The delay between slide animations (in milliseconds)
      complete: function() {},  //  A function that gets called after every slide animation
      keys: true,               //  Enable keyboard (left, right) arrow shortcuts
      dots: true,               //  Display dot navigation
      fluid: false              //  Support responsive design. May break non-responsive designs
    });

    $('.unslider-arrow').click(function() {
      var fn = this.className.split(' ')[1];
      unslider.data('unslider')[fn]();
    });

    $('.movie-box').flexslider({
      animation: "slide",
      direction: "vertical",
    })

  });
</script>
</html>